<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外卖</title>
    <link rel="stylesheet" type="text/css" media="screen" href="../../global/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="../../global/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" media="screen" href="../../global/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="../../global/css/swiper-3.4.2.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="../../global/css/supplyShoping.css">

</head>
<body>
<div class="container">
    <!--上面的选项卡 -->
    <div class="togoTab">
        <div class="togoItem">销售中(125)</div>
        <div class="togoItem active">未过审(5)</div>
        <div class="togoItem">仓库中(3)</div>
    </div>
    <!-- 条件搜索 -->
    <div class="condition">
        <form class="condition_from" action="">
            <div class="condition_item">
                <div class="item_1">
                    <div class="layui-form-item inline">
                        <label class="layui-form-label">商品名称：</label>
                        <div class="layui-input-inline">
                            <input type="text" name="title" required lay-verify="required" placeholder="请输入商品名称"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item inline">
                        <label class="layui-form-label">商品栏目：</label>
                        <div class="layui-input-inline">
                            <select name="city" class="select"  lay-verify="required">
                                <option value="">请选择商品栏目</option>
                                <option value="0">1</option>
                                <option value="1">2</option>
                                <option value="2">3</option>
                                <option value="3">4</option>
                                <option value="4">5</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item inline">
                        <label class="layui-form-label">商品类型：</label>
                        <div class="layui-input-inline">
                            <select name="city" class="select" lay-verify="required">
                                <option value="">请选择商品栏目</option>
                                <option value="0">1</option>
                                <option value="1">2</option>
                                <option value="2">3</option>
                                <option value="3">4</option>
                                <option value="4">5</option>
                            </select>
                        </div>
                    </div>

                </div>
                <div class="item_1">
                    <div class="layui-form-item">

                        <div class="layui-inline">
                            <label class="layui-form-label">价格：</label>
                            <div class="layui-input-inline" style="width: 100px;">
                                <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid">-</div>
                            <div class="layui-input-inline" style="width: 100px;">
                                <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
                            </div>
                        </div>



                    </div>
                </div>
            </div>
            <div class="condition_item"></div>
            <div class="condition_btn">
                筛选
            </div>
        </form>
    </div>
    <!--    批量删除按钮-->
    <button class="layui-btn">
        <i class="layui-icon">&#xe640;</i>批量删除
    </button>
    <button class="layui-btn">
        <i class="layui-icon">&#x1002;</i>批量下架
    </button>
    <button class="layui-btn" id="addGroup" style="float: right">
        <i class="layui-icon">&#xe608;</i>添加商品
    </button>

    <!--表格展示-->
    <table id="conditionTable" lay-filter="test"></table>
    <!--表格展示结束-->
</div>
</body>
</html>
<script type="text/javascript" src="../../global/js/libs/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../../global/js/jq.js"></script>
<script type="text/javascript" src="../../global/js/swiper-3.4.2.jquery.min.js"></script>
<script type="text/javascript" src="../../global/js/plugin/datatables/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../../global/js/plugin/datatables/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="../../global/layui/layui.js"></script>
<script type="text/javascript" src="../../global/js/my/permission.js"></script>
<script type="text/javascript">
    $(function () {
        $(".togoTab .togoItem").click(function () {
            $(this).addClass("active");
            $(this).siblings().removeClass("active");
        });
        //点击添加商品 => 页面跳转
        $("#addGroup").click(function(){
            console.log("click=>添加团购");
            window.location.href="./add.html"
        });
        //    设置单元格
        layui.use('table', function(){
            var table = layui.table;
            //第一个实例
            table.render({
                elem: '#conditionTable'
                ,height: 312
                ,url: '/demo/table/user/' //数据接口
                ,page: true //开启分页
                ,cols: [[ //表头
                    {field: 'id', title: '商品ID', width:80,fixed: 'left'}
                    ,{field: 'username', title: '商品图', width:80}
                    ,{field: 'sex', title: '性别', width:80, sort: true}
                    ,{field: 'city', title: '所属栏目', width:80}
                    ,{field: 'sign', title: '排序', width: 80}
                    ,{field: 'experience', title: '原价', width: 80, sort: true}
                    ,{field: 'score', title: '售价', width: 80, sort: true}
                    ,{field: 'classify', title: '佣金', width: 80}
                    ,{field: 'wealth', title: '销量', width: 135, sort: true},
                    {fixed: 'right', width:150, align:'center',title: '操作',toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
                ]]
            });

        });
        //监听工具条
        table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if(layEvent === 'detail'){ //查看
                //do somehing
            } else if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if(layEvent === 'edit'){ //编辑
                //do something

                //同步更新缓存对应的值
                obj.update({
                    username: '123'
                    ,title: 'xxx'
                });
            }
        });
    })
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>